<template>
 <view class="content">
  <swiper class="appointment-swiper" autoplay="false">
   <swiper-item>
    <image class="banner-image" src="../../static/images/index/book.png" mode="aspectFit"></image>
   </swiper-item> 
  </swiper>
  <view style="position: relative; left: 0rpx; top: 14rpx">
   <view class="letter" style="position: relative; left: 100rpx; top: 64rpx">楼盘名称</view>
   <view class="input-box" style="position: relative; left: 230rpx; top: 18rpx"><input class="input"
     style="position: relative; left: 29rpx; top: 8rpx" type="text" placeholder="融圣国际" /></view>
   <view class="letter" style="position: relative; left: 100rpx; top: 64rpx">预约类型</view>
   <view class="input-box" style="position: relative; left: 230rpx; top: 18rpx"><input class="input"
     style="position: relative; left: 29rpx; top: 8rpx" type="text" placeholder="微改报价" /></view>
   <view class="letter" style="position: relative; left: 100rpx; top: 64rpx">户 型</view>
   <view class="input-box" style="position: relative; left: 230rpx; top: 18rpx"><input class="input"
     style="position: relative; left: 29rpx; top: 8rpx" type="text" placeholder="223" /></view>
   <view class="letter" style="position: relative; left: 100rpx; top: 64rpx">姓 名</view>
   <view class="input-box" style="position: relative; left: 230rpx; top: 18rpx"><input class="input"
     style="position: relative; left: 29rpx; top: 8rpx" type="text" placeholder="小许" /></view>
   <view class="letter" style="position: relative; left: 100rpx; top: 64rpx">联系方式</view>
   <view class="input-box" style="position: relative; left: 230rpx; top: 18rpx"><input class="input"
     style="position: relative; left: 29rpx; top: 8rpx" type="text" placeholder="186xxxxxx" /></view>
   <view class="letter" style="position: relative; left: 100rpx; top: 64rpx">微信号码</view>
   <view class="input-box" style="position: relative; left: 230rpx; top: 18rpx"><input class="input"
     style="position: relative; left: 29rpx; top: 8rpx" type="text" placeholder="3545341225" /></view>
  </view>
  <button type="default" style="margin:30px 100px; background-color:#3d9c36;color: #FFFFFF;">确定预约</button>
 </view>

</template>
<script>
</script>

<style>
	* {
		margin: 0 auto;
		padding: 0 0;
	}
	
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
		box-sizing: border-box; //盒子模型 
	}          
	
	.banner-swiper {
		width: 100%;
		height: 450rpx;
	}
	
	.banner-image {
		width: 100%;
		height: 100%;
	}
.letter {
  font-size: 28rpx;
  font-weight: 500;
  color: #666666;
  line-height: 28rpx;
 }



 .input-box {
  width: 486rpx;
  height: 60rpx;
  background: #ffffff;
  border: 2rpx solid rgba(0, 0, 0, 0.10);
  border-radius: 8rpx;
 }
 
 
 .appointment-swiper {
   width: 100%;
   height: 450rpx;
  }
</style>